<template>
    <div class="app-container">
        <div class="wrap">
            <h2 class="box">模板查看</h2>
        </div>
        <dynamic-table ref="dynamicTable" :table-data="tableRowData" :table-header="tableColData" v-loading="loading"
            :selection="false"></dynamic-table>

        <div class="wrap">
            <h2 class="box">模板设置</h2>
        </div>
        <el-table :data="tableColData" style="width: 100%;" row-key="id" border default-expand-all
            :tree-props="{ children: 'children' }" v-loading="loading" max-height="450"
            :header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }">
            <el-table-column prop="name" label="姓名">
            </el-table-column>
            <el-table-column prop="ident" label="权限" filter-placement="bottom-end">
                <template slot-scope="scope">
                    <el-tag :type="scope.row.ident === true ? 'primary' : 'success'" disable-transitions>
                        {{ sceneFormat(scope.row.ident) }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="handleUpdate(scope.row)" v-hasPermi="['admin:budget:form:detail:updateheader:post']">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
            <el-form ref="form" :model="form" :rules="rules" label-width="100px">
                <el-form-item label="源表头数据" prop="header">
                    <el-input v-model="form.header" placeholder="源表头数据" disabled />
                </el-form-item>
                <el-form-item label="新表头数据" prop="headerU">
                    <el-input v-model="form.headerU" placeholder="新表头数据" />
                </el-form-item>
                <el-form-item label="权限" prop="role">
                    <el-select v-model="form.role" placeholder="权限" style="width: 100%;" clearable>
                        <el-option v-for="dict in selectOptions" :key="dict.dictValue" :label="dict.dictLabel"
                            :value="dict.dictValue" />
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>

import { listType, updateHeader, inspectHeaderField } from "@/api/vadmin/budget/formwork/dataapi";
import DynamicTable from "@/components/MultistageHeader/index";
import { Decrypt, Encrypt, HmacMD5 } from "@/utils/AesHmacMD5";

export default {
    components: { DynamicTable },
    created() {
        this.getDicts("fields_ident").then(response => {
            this.selectOptions = response.data;
        });
        this.form.formId = this.$route.params && this.$route.params.formId
        this.getList(this.form.formId);
    },
    data() {
        return {
            open: false,
            title: '',
            // 表头
            tableColData: [],
            // 表内容
            tableRowData: [],
            // 遮罩层
            loading: true,
            form: {
                formId: undefined,
                id: undefined,
                header: undefined,
                headerU: undefined,
                role: undefined
            },
            rules: {
                header: [
                    { required: true, message: "源表头数据不能为空", trigger: "blur" }
                ],
            },
            // 查看权限字典
            selectOptions: [],
            // 查看是修改还是权限设置
            bolUpdateOrSelect: true,
        }
    },
    methods: {
        // 场景字典翻译
        sceneFormat(row, column) {
            return this.selectDictLabel(this.selectOptions, row + "");
        },
        /**
         * 查询表头数据
         * @param {*} formId 模板ID
         */
        getList(formId) {
            this.loading = true
            listType({ 'formId': formId }).then(response => {
                var resData = JSON.parse(Decrypt(response.data))
                this.tableColData = resData.tableColData;
                this.loading = false;
            }).catch(error => {
                this.loading = false;
            });
        },
        /**
         * 修改表头数据
         */
        handleUpdate(row) {
            this.form.id = row.id
            this.form.header = row.name
            this.title = '模板设置'
            this.open = true
        },
        /**
         * 关闭弹框
         */
        cancel() {
            this.open = false
            this.resetForm("form");
        },
        /**
         * 提交修改数据
         */
        submitForm() {
            var _this = this
            this.$refs["form"].validate(valid => {
                if (valid) {
                    if (_this.form.headerU != undefined) {
                        inspectHeaderField(_this.form).then(response => {
                            var inspect = JSON.parse(Decrypt(response.data))
                            if (!inspect) {
                                _this.$message.warning('表头数据不能重复');
                                return
                            }
                        })
                    }
                    updateHeader(_this.form).then(response => {
                        _this.getList(_this.form.formId)
                        _this.cancel()
                    })
                }
            })
        },
    }
}
</script>

<style>
.wrap {
    text-align: center;
    /* background-color: #6c6b6b; */
    height: 50px;
    margin-bottom: 10px;
    background-image: linear-gradient(225deg, #FF3CAC 0%, #784BA0 50%, #2B86C5 100%);
}

.box {
    color: aliceblue;
    line-height: 50px;
}
</style>